var domain = 'https://api.martechlinks.com/';
var token;
var Yuntongchat = {
  init: function () {
    try {
      var reg = new RegExp("(^|&)token=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = document.getElementById("ytcs").src.split('?')[1].substr(0).match(reg); //匹配目标参数
      token = unescape(r[2]);
    } catch (e) {
      console.error("引入的Script的Id必须为ytcs，且必须带上相应的token，获取token请上管理后台！");
    }
    if (!token) return;

    var that = this;
    var ul = document.createElement('ul');
    ul.setAttribute('id','list');
    var li = document.createElement('li');
    var liSecond = document.createElement('li');
    var liThild = document.createElement('li');


    var a = document.createElement('a');
    var aSecond = document.createElement('a');
    var aThild = document.createElement('a');

    var img = document.createElement('img');
    var imgSecond = document.createElement('img');
    var imgThild = document.createElement('img');

    var h4 = document.createElement('h4');
    var h4Elemnet = document.createElement('h4');
    var h4Second = document.createElement('h4');
    var h4Thild = document.createElement('h4');

    var phoneDiv = document.createElement('div');
    var p = document.createElement('p');
    p.setAttribute('id','phoneNumber');

    var consulting = document.createElement('div');
    var consultingImg = document.createElement('img');
    consultingImg.setAttribute('id','consultingImg');


    ul.style.margin = '-150px 0 0';
    ul.style.padding = '0';
    ul.style.position = 'fixed';
    ul.style.zIndex = '100';
    ul.style.top = '50%';
    ul.style.right = '0';
    ul.style.width = '90px';
    ul.style.height = '272px';
    ul.style.background = 'rgb(0, 160, 222)';

    li.style.listStyleType = 'none';
    li.style.height = '90px';
    li.style.width = '90px';
    li.style.borderBottom = '1px solid #fff';

    liSecond.style.listStyleType = 'none';
    liSecond.style.height = '90px';
    liSecond.style.width = '90px';
    liSecond.style.position = 'relative';
    liSecond.style.borderBottom = '1px solid #fff';

    liThild.style.listStyleType = 'none';
    liThild.style.height = '90px';
    liThild.style.width = '90px';
    liThild.setAttribute('id','qrCode');


    a.style.display = 'block';
    a.style.height = '90px';
    a.style.cursor = 'pointer';
    a.setAttribute('id', 'online');

    aSecond.style.display = 'block';
    aSecond.style.height = '90px';
    aSecond.style.cursor = 'pointer';
    aSecond.style.position = 'relative';
    aSecond.setAttribute('id', 'Telephone');

    aThild.style.display = 'block';
    aThild.style.height = '90px';
    aThild.style.cursor = 'pointer';
    aThild.style.position = 'relative';
    aThild.setAttribute('id', 'WeChat');

    h4.style.fontSize = '12px';
    h4.style.margin = '8px auto 0';
    h4.style.fontWeight = '400';
    h4.style.color = '#fff';
    h4.style.textAlign = 'center';

    h4Elemnet.style.fontSize = '12px';
    h4Elemnet.style.margin = '8px auto 0';
    h4Elemnet.style.fontWeight = '400';
    h4Elemnet.style.color = '#fff';
    h4Elemnet.style.textAlign = 'center';
    h4Elemnet.style.display = 'none';

    h4Second.style.fontSize = '12px';
    h4Second.style.margin = '8px auto 0';
    h4Second.style.fontWeight = '400';
    h4Second.style.color = '#fff';
    h4Second.style.textAlign = 'center';

    h4Thild.style.fontSize = '12px';
    h4Thild.style.margin = '8px auto 0';
    h4Thild.style.fontWeight = '400';
    h4Thild.style.color = '#fff';
    h4Thild.style.textAlign = 'center';

    h4.innerHTML = '在线咨询';
    h4Elemnet.innerHTML = '收起咨询';
    h4Second.innerHTML = '电话沟通';
    h4Thild.innerHTML = '微信咨询';
    p.innerHTML = '400-6695566';


    img.style.width = '24px';
    img.style.margin = '0 auto';
    img.style.display = 'block';
    img.style.paddingTop = '19px';

    imgSecond.style.width = '24px';
    imgSecond.style.margin = '0 auto';
    imgSecond.style.display = 'block';
    imgSecond.style.paddingTop = '19px';

    imgThild.style.width = '24px';
    imgThild.style.margin = '0 auto';
    imgThild.style.display = 'block';
    imgThild.style.paddingTop = '19px';

    img.src = 'https://www.martechlinks.com/frame/static/frameImg/message.png';
    imgSecond.src = 'https://www.martechlinks.com/frame/static/frameImg/phone.png';
    imgThild.src = 'https://www.martechlinks.com/frame/static/frameImg/wechat.png';
    consultingImg.src = 'https://www.martechlinks.com/frame/static/frameImg/code.jpg'

    phoneDiv.style.position = 'absolute';
    phoneDiv.style.left = '-160px';
    phoneDiv.style.padding = '16px';
    phoneDiv.style.top = '-69px';
    phoneDiv.style.background = '#fff';
    phoneDiv.style.display = 'none';
    phoneDiv.style.borderRadius = '6px';
    phoneDiv.style.boxShadow = '1px 0px 20px 0 #bbc5ca';
    p.style.color = '#333';
    p.style.margin = '0';
    p.style.lineHeight = '2rem';

    consulting.style.position = 'absolute';
    consulting.style.left = '-132px';
    consulting.style.top = '0';
    consulting.style.background = '#fff';
    consulting.style.display = 'none';
    consulting.style.width = '108px';
    consulting.style.height = '108px';
    consulting.style.borderRadius = '7px';
    consulting.style.zIndex = '10';
    consulting.style.boxShadow = '1px 0px 20px 0 #bbc5ca';

    consultingImg.style.width = '100%'

    //在线咨询
    ul.appendChild(li).appendChild(a).appendChild(img);
    ul.appendChild(li).appendChild(a).appendChild(h4);
    ul.appendChild(li).appendChild(a).appendChild(h4Elemnet);
    //微信咨询
    ul.appendChild(liSecond).appendChild(aSecond).appendChild(imgSecond);
    ul.appendChild(liSecond).appendChild(aSecond).appendChild(h4Second);
    ul.appendChild(liSecond).appendChild(aSecond).appendChild(phoneDiv).appendChild(p);
    //微信咨询
    ul.appendChild(liThild).appendChild(aThild).appendChild(imgThild);
    ul.appendChild(liThild).appendChild(aThild).appendChild(h4Thild);
    ul.appendChild(liThild).appendChild(aThild).appendChild(consulting).appendChild(consultingImg);
    document.body.appendChild(ul);


    var online = document.getElementById('online');
    var on = true;

    online.addEventListener('click', function (e) {
      e.preventDefault();
      if (on) {
        on = false;
        that.openChat();
        img.src = 'https://www.martechlinks.com/frame/static/frameImg/downArrow.png';
        h4.style.display = 'none';
        h4Elemnet.style.display = 'block';
      } else {
        on = true;
        that.hideChat();
        img.src = 'https://www.martechlinks.com/frame/static/frameImg/message.png';
        h4Elemnet.style.display = 'none';
        h4.style.display = 'block';
      }

    });

    online.addEventListener('mouseenter', function (e) {
      a.style.textDecoration = 'none';
    });


    Telephone.addEventListener('mouseenter', function (e) {
      phoneDiv.style.display = 'block';
      aSecond.style.textDecoration = 'none';
    });
    Telephone.addEventListener('mouseleave', function (e) {
      e.preventDefault();
      phoneDiv.style.display = 'none';
    });

    WeChat.addEventListener('mouseenter', function (e) {
      consulting.style.display = 'block';
      aThild.style.textDecoration = 'none';
    });
    WeChat.addEventListener('mouseleave', function (e) {
      e.preventDefault();
      consulting.style.display = 'none';
    });

  },

  xhrRequest:function(){
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    // xhr.open('get','https://dev.martechlinks.com/home/ChatBoxStyles/read/?token='+encodeURIComponent(token));
    xhr.open('get',domain + '/home/ChatBoxStyles/read/?token='+encodeURIComponent(token));
    xhr.send(formData);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var data = xhr.responseText;
            if(JSON.parse(data).code === 200){

              //设置位置
              switch (JSON.parse(data).data.bar_location) {
                    case 'right_top':
                              document.getElementById('list').style.top = '144px';
                              break;
                    case 'right_middle':
                              document.getElementById('list').style.top = '50%';
                              break;
                    case 'right_bottom':
                              document.getElementById('list').style.bottom = '144px';
                              break;
                    case 'left_top':
                              document.getElementById('list').style.left = '0';
                              document.getElementById('list').style.top = '144px';
                              break;
                    case 'left_middle':
                              document.getElementById('list').style.left = '0';
                              document.getElementById('list').style.top = '50%';
                              break;
                    case 'left_bottom':
                              document.getElementById('list').style.left = '0';
                              document.getElementById('list').style.bottom = '144px';
                              break;
              }

              //背景色
              document.getElementById('list').style.background = JSON.parse(data).data.color;

              //电话号码
              document.getElementById('phoneNumber').innerHTML = JSON.parse(data).data.phone;

              //对话框位置

              switch (JSON.parse(data).data.box_style){
                  case 2:
                    document.getElementById('contentIframe').position = 'initial';
                    document.getElementById('contentIframe').margin = '13% auto';
                    break;
                  case 3:
                    document.getElementById('contentIframe').display = 'none';
                    document.getElementById('online').href = domain + '/guestChat/plugin/?token=' + encodeURIComponent(token);;
                    break;

              }

              //微信二维码
              if(JSON.parse(data).data.qr_code){
                  document.getElementById('qrCode').style.display = 'block';
                  document.getElementById('consultingImg').src = JSON.parse(data).data.qr_code;
              }else{
                  document.getElementById('qrCode').style.display = 'none';
              }

              console.log(JSON.parse(data).data);
            }

        }else{
          console.log(xhr.statusText);
        }
    }

  },


  openChat: function () {
    var userAgentInfo = navigator.userAgent;
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
    var agentinfo = null;
    for (var i = 0; i < Agents.length; i++) {
      if (userAgentInfo.indexOf(Agents[i]) > 0) {
        agentinfo = userAgentInfo;
        break;
      }
    }
    if (agentinfo) {
      window.location.href = domain + '/guestChat/h5/?token=' + encodeURIComponent(token);
    } else {
      var that = this;
      if (!this.iframe) {
        var loader = document.createElement("loadingDiv");
        loader.style.zIndex = "999";
        loader.style.position = 'fixed';
        loader.style.bottom = '380px';
        loader.style.right = '40px';
        loader.style.width = '500px';
        loader.innerHTML = "正在加载组件...";
        this.iframe = document.createElement('iframe');
        this.iframe.style.backgroundColor = 'white';
        this.iframe.style.boxShadow = 'rgba(15, 66, 76, 0.25) 0px 0px 24px 0px';
        this.iframe.style.borderRadius = '5px 5px 0px 0px';
        this.iframe.style.position = 'fixed';
        this.iframe.style.height = '0';
        this.iframe.style.overflow = 'hidden';
        this.iframe.style.zIndex = '2147483647';
        this.iframe.style.border = 'none';
        this.iframe.style.bottom = '0';
        this.iframe.style.right = '109px';
        this.iframe.style.width = '500px';
        this.iframe.style.display = 'none';
        this.iframe.setAttribute('id', 'contentIframe');
        this.iframe.setAttribute('src',
          domain + '/guestChat/frame/?token=' + encodeURIComponent(token)
        );
        if (! /*@cc_on!@*/ 0) { //if not IE
          this.iframe.onload = function () {
            loader.style.display = "none";
            console.log("Local iframe is now loaded.");
          };
        } else {
          this.iframe.onreadystatechange = function () {
            if (that.iframe.readyState === "complete") {
              loader.style.display = "none";
              console.log("Local iframe is now loaded.");
            }
          };
        }
        document.body.appendChild(this.iframe);
        document.body.appendChild(loader);
      }
      this.iframe.style.height = '540px';
      this.iframe.style.display = 'block';
    }
  },
  hideChat: function () {
    if (this.iframe) {
      this.iframe.style.height = '0';
      this.iframe.style.display = 'none';
    }
  }
};
Yuntongchat.init();
Yuntongchat.xhrRequest();
window.newMessage = function (msg) {};
